/*
 * @Author: jiu yin
 * @Date: 2024-05-08 18:26:46
 * @LastEditTime: 2024-06-24 13:59:13
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\map_management\index.tsx
 * jiu
 */
import { list_atlas, del_atlas } from "@/api/home";
import { useRoute } from "@/hooks";
import type { ActionType } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { ConfigProvider, Image, message } from "antd";
import { useRef, useState } from "react";
import "./index.scss";
import AddShop from "./component/AddShop";
import ShowPropsConfirm from "@/comment/delete_two/index.tsx";
import { b_to_mb } from "@/utils";

export default function index() {
	const { push } = useRoute();

	//添加
	let [isModalOpen, setIsModalOpen] = useState(false);

	const actionRef = useRef<ActionType>(null);

	const reload = () => {
		actionRef.current && actionRef.current.reload();
	};
	const columns = [
		{
			dataIndex: "index",
			valueType: "indexBorder",
			width: 48,
		},
		{
			title: "地图名称",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{item.name}</p>,
		},
		{
			title: "地图描述 ",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{item.content}</p>,
		},

		{
			title: "上传时间",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{item.created_at}</p>,
		},
		{
			title: "地图大小",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => <p className="c-#161940 text-14px">{b_to_mb(item.size)}MB</p>,
		},
		{
			title: "地图版本",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<p className=" text-14px c-#9697A9">
					当前版本： <span className="c-#161940">V{item.version}</span>
				</p>
			),
		},
		{
			title: "操作",
			valueType: "option",
			key: "option",
			render: (_: any, item: any) => [
				<a
					key="delete"
					className="c-red"
					onClick={() => {
						ShowPropsConfirm({
							async callback() {
								await del_atlas({ map_id: item.map_id });
								message.success("删除成功");
								reload();
							},
						});
					}}>
					移除
				</a>,
				<a key="editable" onClick={() => push("/map_management/map_management/detail?map_id=" + item.map_id)}>
					详情
				</a>,
			],
		},
	];

	return (
		<div className="base_bg_fff">
			<section className="w-240px controlBg1 h-95px  cursor-pointer" onClick={() => setIsModalOpen(true)}>
				<div className="flex justify-center  pt-28px  ">
					<div className="controlIcon1 w-24px h-24px"></div>
					<p className="c-#373B96 text-20px font-700 ml-14px">添加地图</p>
				</div>
			</section>

			<section className="ml--24px">
				<ConfigProvider>
					<ProTable
						columns={columns}
						actionRef={actionRef}
						request={async (params, sort, filter) => {
							let { data } = await list_atlas({
								page: params.current,
								limit: params.pageSize,
								...params,
							});
							data.data.forEach((item: any, index: number) => (item.key = index + 1));
							return {
								data: data.data,
								success: true,
								total: data.total,
							};
						}}
						rowKey="key"
						tableAlertRender={false}
						search={false}
						options={false}
						pagination={{
							pageSize: 10,
							hideOnSinglePage: true,
						}}
						dateFormatter="string"
					/>
				</ConfigProvider>
			</section>

			{isModalOpen && <AddShop isModalOpen={[isModalOpen, setIsModalOpen]} reload={reload}></AddShop>}
		</div>
	);
}
